<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <script type="text/javascript" include="jquery,dat-gui" src="../js/include-web.js"></script>
    <script type="text/javascript" include="mapv" src="../../dist/include-openlayers.js"></script>
    <title>纽约出租车上车点</title>

    <style type="text/css">
        #loading {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -130px;
            text-align: center;
            margin-top: -50px;
            width: 260px;
            padding: 20px;
            background: rgba(0, 0, 0, 0.5);
            color: yellow;
            font-size: 12pt;
        }

        .ol-popup {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
<div id="popup" class="ol-popup" style='width:20%'>
</div>
<div id="map" style="width: 100%;height:100%"></div>
<div id="loading">纽约出租车145万上车点数据加载中...</div>
<script type="text/javascript">
    var map = new ol.Map({
        target: 'map',
        controls: ol.control.defaults({attributionOptions: {collapsed: false}})
            .extend([new ol.supermap.control.Logo()]),
        view: new ol.View({
            center: ol.proj.transform([-73.931577, 40.745654], 'EPSG:4326', 'EPSG:3857'),
            zoom: 11,
            projection: 'EPSG:3857'
        })
    });

    var url = "https://www.supermapol.com/iserver/services/map_China/rest/maps/China_Light";
    map.addLayer(new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: url,
            attributions: new ol.Attribution({
                html: "Map Data © <a href='https://www.supermapol.com/' target='_blank'> SuperMap Online</a>"
            })
        })
    }));
    $.get('../data/nyc-taxi.csv', function (csvstr) {
        var dataSet = mapv.csv.getDataSet(csvstr);

        dataSet.initGeometry(function (data) {
            data ={
                type: 'Point',
                coordinates: ol.proj.transform([parseFloat(data.lng),parseFloat(data.lat)], 'EPSG:4326', 'EPSG:3857')
            } ;
            return data;
        });

        dataSet.initGeometry();
        var mapvOptions = {
            size: 1.5,
            context: 'webgl',
            fillStyle: 'rgba(250, 50, 50, 0.8)',
            draw: 'simple'
        };
        var options = {map: map, dataSet: dataSet, mapvOptions: mapvOptions, attributions: [
            new ol.Attribution({
                html: " 数据来源 <a href='http://www.nyc.gov/html/tlc/html/about/trip_record_data.shtml/' target='_blank'>NYCTaxi(纽约出租车上车点)</a>  © 2017 百度 MapV with <span>© <a href='http://iclient.supermapol.com' target='_blank'>SuperMap iClient</a></span>"
            })]};
        var layer = new ol.layer.Image({
            source: new ol.source.Mapv(options)
        });
        $('#loading').hide();
        initDatGUI(layer, mapvOptions);
        map.addLayer(layer);
    });

    //设置菜单
    function initDatGUI(layer, options) {
        var gui = new dat.GUI();
        var popup = document.getElementById('popup');
        popup.appendChild(gui.domElement);
        gui.add(options, 'size', 0.1, 10).onFinishChange(finished);
        gui.addColor(options, 'fillStyle').onChange(finished);
        function finished() {
            layer.getSource().update(options);
        }

        var control = new ol.control.Control({element: popup});
        control.setMap(map);
        map.addControl(control);
    }
</script>
</body>
</html>
